<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="评论人">
    <textarea placeholder="评论内容"></textarea>
    <button id="add">发表评论</button>
    <ul></ul>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // API信息
        const baseURL = 'http://www.liulongbin.top:3006';
        const searchAPI = '/api/cmtlist';
        const addAPI = '/api/addcmt';
        // comment

        const ul = document.querySelector('ul');
        // 评论人
        const commentName = document.querySelector('input');
        // 评论内容
        const commentContent = document.querySelector('textarea');
        // 发表按钮
        const addBtn = document.querySelector('#add');

        function search () {
            axios({
                method: 'get',
                url: baseURL + searchAPI,
            }).then((res) => {
                ul.innerHTML = '';
                for (const item of res.data.data) {
                    // content: "强无敌"
                    // id: 209
                    // time: "2022-01-19 11:43:49"
                    // username: "的我"
                    const li = document.createElement('li');
                    li.innerText = `评论人：${item.username} 评论内容：${item.content} 提交时间：${item.time}`;
                    ul.appendChild(li);
                }
            });
        }

        addBtn.addEventListener('click', function () {
            axios({
                method: 'post',
                url: baseURL + addAPI,
                data: {
                    username: commentName.value,
                    content: commentContent.value,
                },
            }).then((res) => {
                if (res.data.status === 201) {
                    search();
                }
            });
        });



    </script>
</body>
</html>